<template>
  <div class="listShowStyle">
    <div class="wordStyle"><h3>{{ option.title }}</h3></div>
    <div class="dropDownLoadWrap">
      <el-scrollbar style="height:200px;">
        <div v-infinite-scroll="accountLoadMore" infinite-scroll-disabled="accountBusy" infinite-scroll-distance="10">
          <el-row v-for="(item,index) in data" :key="index" class="listBg" :gutter="10">
            <el-col :span="2" :offset="1">
              <span v-show="option.checkedFlag"><el-checkbox v-model="checkBoxFlag[index]" @change="checkedListBn(index)" /></span>
            </el-col>
            <el-col v-for="(item1,index1) in option.accountList.simpleList" :key="index1" :span="item1.span">
              <div class="wordEllipsis">
                <span>{{ item1.label }}：</span>
                <span :title="item[item1.prop]">{{ item1 | dataDicTrans(item) }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="wordEllipsis">
                <button
                  :class="[accountToggleClass[index] ? 'el-icon-caret-bottom' : 'el-icon-caret-top', 'color-red', 'arrow']"
                  @click="changeStatus(index)"
                />
              </div>
            </el-col>
            <el-col :span="24">
              <div v-show="listDetailShow[index]" class="listDetailBg">
                <el-row :gutter="10">
                  <el-col v-for="(item2, index2) in option.accountList.resList" v-show="!item2.show" :key="index2" :span="item2.span">
                    <div class="wordEllipsis">
                      <span>{{ item2.label }}：</span>
                      <span :title="item[item2.prop]">{{ item2 | dataDicTrans(item) }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>
  </div>

</template>

<script>
export default {
  name: 'DropDownLoad',
  props: ['data', 'option'],
  data() {
    return {
      accountBusy: true,
      accountToggleClass: [],
      listDetailShow: [],
      checkBoxFlag: []
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        console.log('监听父元素数据改变')
        // 父组件param对象改变会触发此函数
        this.accountBusy = true
        for (let i = 0; i < this.accountToggleClass.length; i++) {
          this.$set(this.accountToggleClass, i, false)
        }
        for (let i = 0; i < this.listDetailShow.length; i++) {
          this.$set(this.listDetailShow, i, false)
        }
        for (let i = 0; i < this.checkBoxFlag.length; i++) {
          this.$set(this.checkBoxFlag, i, false)
        }
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    // 列表滚动
    accountLoadMore() {
      console.log('下拉滚动日志。。。。。')
      this.accountBusy = true
      setTimeout(() => {
        this.accountBusy = false
      }, 2000)
    },
    changeStatus(index) {
      this.$set(this.accountToggleClass, index, !this.accountToggleClass[index])
      this.$set(this.listDetailShow, index, !this.listDetailShow[index])
    },
    checkedListBn(index) {
      console.log('checkBoxFlag is: ' + this.checkBoxFlag[index])
      if (this.checkBoxFlag[index]) {
        for (let i = 0; i < this.checkBoxFlag.length; i++) {
          if (i !== index) {
            this.$set(this.checkBoxFlag, i, false)
          }
        }
      }
      this.$emit('checkedListBn', [index, this.checkBoxFlag[index]])
    }
  }
}
</script>

<style scoped>

  .listShowStyle {
    margin-top: 10px;
  }

  .wordStyle {
    line-height: 30px;
    padding: 0 5px;
  }

  .dropDownLoadWrap {
    border: 1px #eee solid;
    margin-top: 10px;
  }

  /*超出省略*/
  .wordEllipsis {
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*width: 100%;*/
    /*height: 40px;*/
    line-height: 40px;
    /*white-space: nowrap;*/
    padding-left: 10px;
    word-break: break-all;
  }

  .el-col > span {
    width: 100%;
    height: 40px;
    line-height: 40px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .listDetailBg {
    background-color: #fff;
    border: 1px #eaeff7 solid;
  }

  .arrow {
    transform: rotateX(180deg);
  }
</style>
